<template>
    <div class="admin-user-wrap">
        <div class="form-wrap">
            <div class="form-item arrow cur">
                <label>登陆密码</label>
                <router-link class="content jc-fe co" to="/password">
                    去修改
                </router-link>
            </div>
            <div class="form-item arrow cur" @click="modal.phone.show = true">
                <label>手机号码</label>
                <div class="content jc-fe co" v-if="userInfo.phonenumber">
                    {{userInfo.phonenumber | phoneNone}}
                </div>
                <div class="content jc-fe co" v-else>
                    去绑定
                </div>
            </div>
            <div class="form-item arrow cur">
                <label>电子邮箱</label>
                <div class="content jc-fe co">
                    去绑定
                </div>
            </div>
            <br>
        </div>
        <popup v-model="modal.phone.show" closeable position="bottom">
            <div class="" style="padding: 15px;">
                <field v-model="modal.phone.form.phonenumber"
                       label="手 机 号 码"
                       type="tel"
                       center
                       placeholder="请输入手机号码"></field>
                <field v-model="modal.phone.form.verificationCode"
                       type="tell"
                       center
                       clearable
                       id="CodeRef"
                       label="短信验证码"
                       placeholder="请输入短信验证码">
                    <l-button class="btn-small"
                               slot="button"
                               :disabled="yzmBtn.disabled"
                               @click="sendYzm">{{yzmBtn.text}}
                    </l-button>
                </field>
                <br>
                <l-button block @click="handlerBindPhoneSubmit">确认</l-button>
            </div>
        </popup>
    </div>
</template>

<script>
    import {Popup, Field} from 'vant'
    import yzm from '@/mixins/yzm'

    export default {
        name: "AdminAccount",
        mixins: [yzm],
        data() {
            return {
                modal: {
                    phone: {
                        show: false,
                        form: {
                            phonenumber: '',
                            verificationCode: '',
                        },
                    },
                    email: {
                        show: false,
                        form: {
                            Email: '975794403@qq.com',
                            verificationCode: '',
                        },
                    }
                }
            }
        },
        computed: {
            userInfo() {
                return this.$root.userInfo
            }
        },
        components: {Popup, Field},
        methods: {
            async handlerBindPhoneSubmit() {
                try {
                    const {data} = await this.$api.user.bindPhone(this.modal.phone.form)
                    this.$utils.store.set('token', data)
                    this.$toast.success('绑定成功')
                    this.modal.phone.show = false
                    this.$root.getUserInfo()
                } catch (e) {
                    console.error(e)
                }
            },
            async sendYzm() {
                if (this.yzmBtn.disabled) {
                    return
                }
                const phone = this.modal.phone.form.phonenumber
                if (phone.trim().length !== 11) {
                    this.$toast.error('请输入手机号')
                    return
                }
                try {
                    await this.$api.user.sendMessage(phone)
                    this.getYzmFn()
                    this.$nextTick(() => {
                        document.querySelector('#CodeRef').focus()
                    })
                } catch (e) {
                    console.error(e)
                }
            },
            async handlerBindEmailSubmit() {
                try {
                    const {data} = await this.$api.user.bindEmail(this.modal.phone.form)
                    this.$toast.success('绑定成功')
                    if (data) {
                        this.$utils.store.set('token', data)
                        if (this.$root.isMiniApp) {
                            this.$utils.store.set('miniAppToken', data)
                            $wxMini.postMessage({data: {bindPhoneToken: data}})
                        }
                    }
                    this.$root.getUserInfo()
                    this.modal.phone.show = false
                } catch (e) {
                    console.error(e)
                }
            },
        },
    }
</script>

<style lang="scss">
    @import "./style";
</style>
